<template>
  <div>
    <div class="header">
        <img src="@/assets/images/logo.jpg" alt="">
    </div>
    <van-tabs v-model="active">
      <van-tab title="推荐音乐" name="1">
          <Music></Music>
      </van-tab>
      <van-tab title="热歌榜" name="2"><HotMusic></HotMusic></van-tab>
      <van-tab title="搜索" name="3"><Search></Search></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Music from './Music'
import HotMusic from './HotMusic'
import Search from './Search'
export default {
      name: "Home",
      components:{
Music,HotMusic,Search
      },
  data() {
    return {
      active: 1,
    };
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 1.68rem;
  img{
      width:100%;
      height:100%;
  }
}
/deep/.van-tabs--line .van-tabs__wrap {
  border-bottom: 1px solid #dbdbdb;
  .van-tab {
    font-size: 16px;
  }
}
</style>
